<template>
  <van-form ref="form" @submit="onSubmit">
    <view class="wrapper">
      <view class="content">
        <view class="con_a">
          <van-field
            v-model="fieldValue.name"
            label="收货人"
            :rules="[{ required: true, message: '请填写收货人姓名' }]"
            placeholder="请填写收货人姓名"
          />
          <van-field
            v-model="fieldValue.mobile"
            label="手机号"
            placeholder="请填写收货人手机号"
            :rules="[
              { required: true, message: '请输入手机号' },
              { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确' },
            ]"
          />
          <van-field
            v-model="fieldValue.p_id.text"
            is-link
            readonly
            label="省"
            placeholder="请选择省"
            :rules="[{ required: true, message: '请选择省' }]"
            @click="showProvincePicker = true"
          />
          <van-popup v-model:show="showProvincePicker" round position="bottom">
            <van-picker
              :columns="province"
              @cancel="showProvincePicker = false"
              @confirm="onProvinceConfirm"
            />
          </van-popup>
          <van-field
            v-model="fieldValue.c_id.text"
            is-link
            readonly
            label="市"
            placeholder="请选择市"
            :rules="[{ required: true, message: '请选择市' }]"
            @click="showCityPicker = true"
          />
          <van-popup v-model:show="showCityPicker" round position="bottom">
            <van-picker :columns="city" @cancel="showCityPicker = false" @confirm="onCityConfirm" />
          </van-popup>
          <van-field
            v-model="fieldValue.d_id.text"
            is-link
            readonly
            label="区"
            placeholder="请选择区"
            :rules="[{ required: true, message: '请选择区' }]"
            @click="showDistrictPicker = true"
          />
          <van-popup v-model:show="showDistrictPicker" round position="bottom">
            <van-picker
              :columns="district"
              @cancel="showDistrictPicker = false"
              @confirm="onDistrictConfirm"
            />
          </van-popup>
          <van-field
            v-model="fieldValue.s_id.text"
            is-link
            readonly
            label="街道"
            placeholder="请选择街道"
            :rules="[{ required: true, message: '请选择街道' }]"
            @click="showStreetPicker = true"
          />
          <van-popup v-model:show="showStreetPicker" round position="bottom">
            <van-picker
              :columns="street"
              @cancel="showStreetPicker = false"
              @confirm="onStreetConfirm"
            />
          </van-popup>
          <van-field
            v-model="fieldValue.area"
            label="详细地址"
            placeholder="请填写详细地址"
            :rules="[{ required: true, message: '请填写详细地址' }]"
          />
          <view style="display: flex; justify-content: space-between; margin-top: 15px"
            ><text>是否为默认地址</text>
            <van-switch
              v-model="fieldValue.default"
              label="设为默认地址"
              size="24px"
              active-color="#ff5525"
            />
          </view>
        </view>
        <van-button type="primary" class="added" round block native-type="submit"
          >保存收货地址</van-button
        >
      </view>
    </view>
  </van-form>
</template>

<script setup lang="ts">
  import { onLoad } from '@dcloudio/uni-app';
  import {
    getProvinceApi,
    getCityApi,
    getDistrictApi,
    getStreetApi,
    addAddressApi,
    updateAddressApi,
  } from '@/api/index';
  import { ref } from 'vue';

  const fieldValue = ref<any>({
    name: '',
    mobile: '',
    p_id: '',
    c_id: '',
    d_id: '',
    s_id: '',
    area: '',
    default: false,
  });
  const province = ref<any>([]);
  const city = ref<any>([]);
  const district = ref<any>([]);
  const street = ref<any>([]);
  const showProvincePicker = ref(false);
  const showCityPicker = ref(false);
  const showDistrictPicker = ref(false);
  const showStreetPicker = ref(false);

  const onProvinceConfirm = ({ selectedOptions }) => {
    showProvincePicker.value = false;
    fieldValue.value.p_id = selectedOptions[0];
    const provinceId = selectedOptions[0].value;
    fieldValue.value.c_id = {};
    fieldValue.value.d_id = {};
    fieldValue.value.s_id = {};
    getCityApi({ parent_id: provinceId }).then((res) => {
      city.value = res.map((item) => ({ text: item.name, value: item.id }));
    });
  };

  const onCityConfirm = ({ selectedOptions }) => {
    showCityPicker.value = false;
    fieldValue.value.c_id = selectedOptions[0];
    const cityId = selectedOptions[0].value;
    fieldValue.value.d_id = {};
    fieldValue.value.s_id = {};
    getDistrictApi({ parent_id: cityId }).then((res) => {
      district.value = res.map((item) => ({ text: item.name, value: item.id }));
    });
  };

  const onDistrictConfirm = ({ selectedOptions }) => {
    showDistrictPicker.value = false;
    fieldValue.value.d_id = selectedOptions[0];
    const districtId = selectedOptions[0].value;
    fieldValue.value.s_id = {};
    getStreetApi({ parent_id: districtId }).then((res) => {
      street.value = res.map((item) => ({ text: item.name, value: item.id }));
    });
  };

  const onStreetConfirm = ({ selectedOptions }) => {
    showStreetPicker.value = false;
    fieldValue.value.s_id = selectedOptions[0];
  };
  const onSubmit = () => {
    const apiCall = fieldValue.value.id ? updateAddressApi : addAddressApi;
    apiCall({
      ...fieldValue.value,
      p_id: fieldValue.value.p_id.value,
      c_id: fieldValue.value.c_id.value,
      d_id: fieldValue.value.d_id.value,
      s_id: fieldValue.value.s_id.value,
      default: fieldValue.value.default ? 1 : 0,
    }).then(() => {
      uni.showToast({
        title: '保存成功',
        icon: 'success',
      });
      uni.navigateTo({
        url: '/pages/address-list/index',
      });
    });
  };
  onLoad((query) => {
    getProvinceApi().then((res) => {
      province.value = res.map((item) => ({ text: item.name, value: item.id }));
      const objString = decodeURIComponent(query?.item);
      const item = JSON.parse(objString);
      fieldValue.value = {
        area: item.area,
        id: item.id,
        name: item.name,
        mobile: item.mobile,
        default: item.default === 1 ? true : false,
        p_id: { text: item.ap, value: item.ap_id },
        c_id: { text: item.ac, value: item.ac_id },
        d_id: { text: item.ad, value: item.ad_id },
        s_id: { text: item.as, value: item.as_id },
      };
      getCityApi({ parent_id: item.ap_id }).then((res) => {
        city.value = res.map((item) => ({ text: item.name, value: item.id }));
      });
      getDistrictApi({ parent_id: item.ac_id }).then((res) => {
        district.value = res.map((item) => ({ text: item.name, value: item.id }));
      });
      getStreetApi({ parent_id: item.ad_id }).then((res) => {
        street.value = res.map((item) => ({ text: item.name, value: item.id }));
      });
    });
  });
</script>

<style lang="scss" scoped>
  .wrapper {
    min-height: 100%;
    overflow-y: auto;
    background-color: #f4f5f7;
    padding-bottom: 20px;

    .content {
      .con_a {
        padding: 0 4%;
        background: #fff;
        padding-bottom: 50px;

        .list {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 55px;
          border-bottom: 1px solid #eee;

          .text {
            font-size: 15px;
            font-weight: 600;
            color: #323232;
          }

          .int {
            input {
              width: 260px;
              font-size: 15px;
              color: #323232;

              .uni-input-placeholder {
                color: rgb(204, 204, 204);
              }
            }
          }

          &:last-of-type {
            border-bottom: none;
          }
        }
      }

      .added {
        position: fixed;
        bottom: 20px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 92%;
        height: 45px;
        border: 1px solid #ff5525;
        background: linear-gradient(270deg, #ff8361, #ff5525);
        border-radius: 23px;
        text-align: center;
        line-height: 45px;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
      }
    }
  }
</style>
